<template>
  <div>
    <div class="breadcrumb">
      <div class="demo-inner-divider">基础用法</div>
      <e-breadcrumb>
        <e-breadcrumb-item to="/radio">Home</e-breadcrumb-item>
        <e-breadcrumb-item to="/Collapse">Components</e-breadcrumb-item>
        <e-breadcrumb-item>Breadcrumb</e-breadcrumb-item>
      </e-breadcrumb>
    </div>
    <div class="breadcrumb">
      <div class="demo-inner-divider">带图标的</div>
      <e-breadcrumb>
        <e-breadcrumb-item to="/radio">
          <e-icon type="member"></e-icon> Home
        </e-breadcrumb-item>
        <e-breadcrumb-item to="/Collapse">
          <e-icon type="folder"></e-icon> Components
        </e-breadcrumb-item>
        <e-breadcrumb-item>
          <e-icon type="folder-open"></e-icon> Breadcrumb
        </e-breadcrumb-item>
      </e-breadcrumb>
    </div>
    <div class="breadcrumb">
      <div class="demo-inner-divider">分隔符</div>
      <e-breadcrumb separator=">">
        <e-breadcrumb-item to="/radio">Home</e-breadcrumb-item>
        <e-breadcrumb-item to="/Collapse">Components</e-breadcrumb-item>
        <e-breadcrumb-item>Breadcrumb</e-breadcrumb-item>
      </e-breadcrumb>
      <e-breadcrumb separator="<b class='demo-breadcrumb-separator'>=></b>">
        <e-breadcrumb-item to="/radio">Home</e-breadcrumb-item>
        <e-breadcrumb-item to="/Collapse">Components</e-breadcrumb-item>
        <e-breadcrumb-item>Breadcrumb</e-breadcrumb-item>
      </e-breadcrumb>
    </div>
    <div class="breadcrumb">
      <div class="demo-inner-divider">带返回按钮</div>
      <e-breadcrumb @backBtnClick="backBtnClick" :back="true">
        <e-breadcrumb-item to="/radio">Home</e-breadcrumb-item>
        <e-breadcrumb-item to="/Collapse">Components</e-breadcrumb-item>
        <e-breadcrumb-item>Breadcrumb</e-breadcrumb-item>
      </e-breadcrumb>
    </div>
    <breadcrumb-md class="markdown-body"></breadcrumb-md>
  </div>
</template>
<script>
import breadcrumbMd from '../../docs/breadcrumb.md';

export default {
  components: {
    breadcrumbMd
  },
  data() {
    return {
      breadcrumbItems: [
        {to: {path:'/badge'}, title:'一级菜单'},
        {to: {path:'/button'}, title:'二级菜单'},
        {title:'当前位置',}
      ]
    }
  },
  methods: {
    backBtnClick() {
      // eslint-disable-next-line no-console
      console.log("点击返回按钮")
      // 返回跳转逻辑
    }
  }

}
</script>
<style lang="less" scoped>
  .demo-breadcrumb-separator{
      color: #ff5500;
      padding: 0 5px;
  }
  .breadcrumb {
    margin-bottom: 30px;
  }
</style>
